<template>
  <div class="moneyIndexTop">
    <span class="fl">欢迎来到斑马公学</span>
    <span class="fr back">
      <el-dropdown @command="handleCommand" style="height:100%;" trigger="click">
        <span class="el-dropdown-link" style="color:#fff;">
          {{userName}}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown" >
          <!-- <el-dropdown-item command="adminIndex">
            <i></i>
            <span>查看资料</span>
          </el-dropdown-item> -->
          <el-dropdown-item command="adminPersonalCenter">
            <i></i>
            <span>个人信息</span>
          </el-dropdown-item>
          <el-dropdown-item command="back">
            <i></i>
            <span>退出</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </span>


    <transition name="el-fade-in-linear">
      <div class="popup-container" v-show="popupState.showStatus">
        <div class="popup" v-if="popupState.popupName == '个人信息'">
          <i class="el-icon-error icon_close" @click="popupState.showStatus = false"></i>
          <div class="title">个人信息</div>

          <div class="content">
            <el-form :model="formData" ref="phoneRules" :rules="phoneRules"  label-width="90px" :inline="true"  label-position="left"
               class="form">
              <div style="overflow:hidden">

                <el-form-item label="登录账号 : "  size="small" prop="accountName" class="">
                  <el-input v-model="formData.accountName" disabled v-if="formData.isUpdate == 0"></el-input>
                  <el-input v-model="formData.accountName" v-else :disabled="!editStatus" ></el-input>
                </el-form-item>
                
                <el-form-item label="电话 : " prop="phone" size="small" class="">
                  <el-input  v-model="formData.phone" maxlength=11  :disabled="!editStatus"></el-input>
                </el-form-item>

                
                <el-form-item label="密码 : "   prop="accountPassword" size="small" class="">
                  <el-input v-model="formData.accountPassword" style="width: 100px" disabled type="password" ></el-input>
                  <span @click="updatePassword" class="update_password">修改密码</span>
                </el-form-item>

                <div class="clear"></div>

                
                <el-form-item label="员工姓名 : " prop="employeesName" size="small" class="">
                  <el-input  v-model="formData.employeesName" disabled></el-input>
                </el-form-item>
                <el-form-item label="入职日期 : " prop="entryTime" size="small" class="">
                  <el-input v-model="formData.entryTime" disabled  ></el-input>
                </el-form-item>

                
                <el-form-item label="入职类型 : " prop="entryType" size="small" class="">
                  <el-input v-model="formData.entryType" disabled ></el-input>
                </el-form-item>
                
                <el-form-item label="工号 : "    size="small" class="">
                  <el-input  v-model="formData.workNo" disabled ></el-input>
                </el-form-item>
                

                

                
                <el-form-item label="性别 : " prop="sex" size="small" class="">
                  <el-input v-model="formData.sex" disabled></el-input>
                </el-form-item>
                

                <el-form-item label="职级 : " prop="rankCode" size="small" class="">
                  <el-input v-model="formData.rankName" disabled></el-input>
                </el-form-item>
                <el-form-item label="昵称 : " prop="nickName" size="small" class=" ">
                  <el-input  v-model="formData.nickName" disabled></el-input>
                </el-form-item>

                <div class="school_list">
                  <div class="school_item" v-for="(item, index) in formData.bmEmployeesDto" :key="index">
                    <el-form-item label="校区 : "  prop="schoolId" size="small" class="">
                      <el-input v-model="item.schoolName" disabled></el-input>
                    </el-form-item>

                    <el-form-item label="角色 : " prop="roleId" size="small" class="">
                      <el-input v-model="item.roleName" disabled></el-input>
                    </el-form-item>
                    
                    <el-form-item label="职位 : " prop="positionCode" size="small" class="">
                      <el-input v-model="item.positionName" disabled></el-input>
                    </el-form-item>
                  </div>
                </div>

                <div class="qr_box">
                  <span>购课二维码:</span>
                  <img :src="buyClassQrCode" alt="">
                </div>


                

              </div>

            </el-form>

            <div class="btn_box" style="margin-top: 0;">
              <div class="btn btn_add" v-if="!editStatus" @click="edit('ruleForm')">
                <span class="btn_txt">修改</span>
              </div>
              <div class="btn btn_add" v-if="editStatus" @click="submitEdit('ruleForm')">
                <span class="btn_txt">保存</span>
              </div>
            </div>

          </div>
        </div>

        <div class="popup mini" v-if="popupState.popupName == '修改密码'">
          <i class="el-icon-error icon_close" @click="popupState.showStatus = false"></i>
          <div class="title">{{popupState.popupName}}</div>

          <div class="content">
            <el-form :model="passwordformData" ref="ruleForm" :rules="rules" label-position="left"  style=""
              label-width="90px" class="form">
              <div style="overflow:hidden">
                <el-form-item label="原密码 : " prop="accountPassword" style="width: 100%" size="small" class="fl">
                  <el-input v-model="passwordformData.accountPassword" type="password" autocomplete="off"  placeholder="请输入原密码"></el-input>
                </el-form-item>
                <el-form-item label="新密码 : " style="width: 100%" prop="newAccountPassword" size="small" class="fl ">
                  <el-input v-model="passwordformData.newAccountPassword" type="password" autocomplete="off" placeholder="请输入新密码"></el-input>
                </el-form-item>
                <el-form-item label="新密码 : " style="width: 100%" prop="newAccountPasswordAgain" size="small" class="fl ">
                  <el-input v-model="passwordformData.newAccountPasswordAgain" type="password" autocomplete="off" placeholder="请再次输入新密码"></el-input>
                </el-form-item>

              </div>

            </el-form>

            <div class="btn_box">
              <div class="btn btn_add" v-if="popupState.popupName == '修改密码'" @click="passwordSubmit('ruleForm')">
                <span class="btn_txt">保存</span>
              </div>
            </div>

          </div>
        </div>
      </div>
    </transition>
  </div>

</template>
<script>
import {
  createNamespacedHelpers,
  mapState
} from "vuex";
let {
  mapGetters,
  mapActions
} = createNamespacedHelpers("adminBasic");
import axios from "axios";

export default {
  name: "moneyIndexTop",
  data() {
    return {
      jwtAuth: {},
      buyClassQrCode: '',
      editStatus: false,
      popupState: {
        popupName: '个人信息',
        showStatus: false
      },
      formData: {},
      passwordformData: {
        accountPassword: '',
        newAccountPassword: '',
        newAccountPasswordAgain: '',
      },
      rules: {
        accountPassword: [
          { required: true, message: ' ', trigger: 'blur' },
        ],
        newAccountPassword: [
          { required: true, message: ' ', trigger: 'blur' },
        ],
        newAccountPasswordAgain: [
          { required: true, message: ' ', trigger: 'blur' },
        ],
      },
      phoneRules: {
        phone: [
          { required: false, message: '请输入手机号', trigger: 'blur' },
          {pattern: /^1[34578]\d{9}$/, message: '手机号格式错误'}
        ],
      },
      dialogShow: false,
      shakeId: 0,
      userName: "",
    };
  },
  created() {
    this.jwtAuth = JSON.parse(sessionStorage.getItem('jwtAuth'));
    this.userName = this.jwtAuth.employeesName
  },
  computed: {
    // ...mapState(["adminMenu", "realname"])
  },
  watch: {
    // realname(newVal, oldVal) {
    //   this.userName = newVal
    // }
  },
  methods: {
    ...mapActions([
      "formGet",
      "post"
    ]),
    handleCommand(com) {
      if (com == "back") {
        this.back();
      } else if (com == "adminPersonalCenter") {
        this.initUserInfo();
        // this.$refs['ruleForm'].resetFields();
        this.editStatus = false;
        // this.$router.push({
        //   name: "personCenter"
        // });
      } else if (com == "adminIndex") {
        if (this.adminMenu[0]) {
          this.$router.push({
            name: this.adminMenu[0].url
          });
        } else {
          this.$router.push({
            name: nothing
          });
        }
      }
    },

    initUserInfo() {
      let data = {
        id: this.jwtAuth.accountId,
      }
      this.formGet({
        API: 'selectById',
        data: data
      }).then(res => {
        this.popupState = {
          showStatus: true,
          popupName: '个人信息',
        }
        this.formData = res;
        if(this.formData.sex == '1') {
          this.formData.sex = '男'
        }else{
          this.formData.sex = '女'
        }
        this.formData.entryType == 1 ?  this.formData.entryType = '全职' :  '兼职'
        this.formData.accountPassword = '1231231'

        this.buyClassQrCode = `http://qr.liantu.com/api.php?&w=230&logo=http://www.mingxiaoclub.cn/zebraOnline/img/icon_share.png&text=http://www.mingxiaoclub.cn/paymentSys/%23/home?createBy=${this.formData.employeesId}%26createByName=${this.formData.employeesName}`
      }).catch(err => {
        this.$message.error(err);
      })
    },

    updatePassword() {
      this.passwordformData = {
        accountPassword: '',
        newAccountPassword: '',
        newAccountPasswordAgain: '',
      }
      this.popupState = {
        showStatus: true,
        popupName: '修改密码',
      }
    },
    passwordSubmit(formName) {
      let data = this.passwordformData
      data.accountId = this.jwtAuth.accountId

      if(!data.accountPassword) {
        this.$message.error('请输入旧密码');
        return false;
      }
      if(!data.newAccountPassword) {
        this.$message.error('请输入新密码');
        return false;
      }
      if(!data.newAccountPasswordAgain) {
        this.$message.error('请再次输入新密码');
        return false;
      }

      if(data.newAccountPassword !== data.newAccountPasswordAgain) {
        this.$message.error('两次密码输入不一致,请重新输入');
        return false;
      }

      this.post({
        API: 'updatePassWord',
        data: data
      }).then(res => {
        this.$message.success('修改成功');
        this.popupState.showStatus = false;
      }).catch(err => {
        this.$message.error(err);
      })
    },
    edit() {
      this.editStatus = true;
    },
    submitEdit() {
      this.$refs.phoneRules.validate((valid) => {
        if (valid) {
          let data = this.formData;
          data.sex == '男' ? data.sex = 1 : 2
          data.entryType == '全职' ? data.entryType = 1 : 2
          // delete data.isUpdate
          this.post({
            API: 'update',
            data: data
          }).then(res => {
            this.$message.success('修改成功');
            this.editStatus = false;
            this.popupState.showStatus = false;
          }).catch(err => {
            this.$message.error(err);
          })
        }
      });
    },

    back() {
      this.$alert("是否确认退出系统", "提示", {
        confirmButtonText: "确定",
        callback: act => {
          if (act == "confirm") {
            sessionStorage.clear();
            this.$message.success("退出成功");
            this.$router.push({
              name: "login"
            });
            this.dialogShow = false;
          }
        }
      });
    }
  }
};
</script>
<style scoped>
.qr_box {
  color: #303133;
  display: flex;
  align-items: flex-start;

}
.update_password{
  font-size: 12px;
  color: #77A4FF;
  cursor: pointer;
  margin-left: 10px;
}

.back {
  color: #fff;
}

img {
  display: block;
}

.moneyIndexTop {
  background: #303133;
  width: 100%;
  height: 100%;
  padding: 0 20px 0 10px;
  color: #fff;
  font-weight: 500;
  box-sizing: border-box;
  line-height: 50px;
  font-size:14px;
}

.moneyIndexTop .fr {
  font-size: 15px;
}

.moneyIndexTop .popup .el-form-item--small.el-form-item{
  margin-right: 3%;
  margin-bottom: 38px;
  line-height: 30px;
}

/* .moneyIndexTop .fl img {
    width: 50px;
    height: 40px;
    float: left;
    margin-top: 10px;
    margin-right: 15px;
  } */
</style>
